window.addEventListener("load",function(){
    class Cart{
        constructor(){
            this.data=[
                {"id":"1","count":1,
                    "price": "\n                                                                    1498\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
                    "title": "【新品】罗技iK1095键盘保护套 适用于 iPad Air（第四代）"
                },
                {"id":"2","count":1,
                    "price": "\n                                                                    1498\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
                    "title": "罗技iK1176键盘保护套 适用于 11 英寸 iPad Pro（第一、二、三代）"
                },
                {"id":"3","count":1,
                    "price": "\n                                                                    1698\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/1.png",
                    "title": "罗技iK1275键盘保护套 适用于 12.9 英寸 iPad Pro（第五代）"
                },
                {"id":"4","count":1,
                    "price": "\n                                                                    1899\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-04-06/NEW_XL/K860.png",
                    "title": "罗技 ERGO K860人体工学分体式键盘"
                },
                {"id":"5","count":1,
                    "price": "\n                                                                    1599\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-12-08/NEW_XL/002.png",
                    "title": "罗技Folio Touch ik1094键盘保护套"
                },
                {"id":"6","count":1,
                    "price": "\n                                                                    1599\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-27/NEW_XL/01 (1).png",
                    "title": "罗技FolioTouch IK1175背光键盘保护套,适配11英寸iPad Pro(第一、二代)"
                },
                {"id":"7","count":1,
                    "price": "\n                                                                    1399\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/01-1.png",
                    "title": "罗技 Combo Touch键盘保护套（适配iPad第七代）"
                },
                {"id":"8","count":1,
                    "price": "\n                                                                    1399\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/05.png",
                    "title": "罗技 Combo Touch键盘保护套【适配iPad Air第三代和10.5英寸iPad Pro】"
                },
                {"id":"9","count":1,
                    "price": "\n                                                                    1099\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-08-11/NEW_XL/01.png",
                    "title": "罗技 SLIM FOLIO PRO iK1274集成蓝牙键盘保护套"
                },
                {"id":"10","count":1,
                    "price": "\n                                                                    1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380可妮兔-01-min.png",
                    "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 可妮兔【限量送李易峰充电宝】"
                },
                {"id":"11","count":1,
                    "price": "\n                                                                    1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380布朗熊-02-min.png",
                    "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 布朗熊【限量送李易峰充电宝】"
                },
                {"id":"12","count":1,
                    "price": "\n                                                                    1799\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-Air-键盘保护套-01.png",
                    "title": "罗技 Slim Folio iPad键盘保护套 【ik1055BK iPad键盘保护套】"
                },
                {"id":"13","count":1,
                    "price": "\n                                                                    1799\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-01 .png",
                    "title": "罗技 Slim Folio iPad Air 键盘保护套"
                },
                {"id":"14","count":1,
                    "price": "\n                                                                    1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380白-01-min.png",
                    "title": "罗技 K380蓝牙键盘 芍药白【限量送李易峰充电宝】"
                },
                {"id":"15","count":1,
                    "price": "\n                                                                    1229\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380粉-01-min.png",
                    "title": "罗技 K380蓝牙键盘 茱萸粉【限量送李易峰充电宝】"
                },
                {"id":"16","count":1,
                    "price": "\n                                                                    1699\n                                                                ",
                    "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2019-02-15/NEW_XL/ik1053-01.png",
                    "title": "罗技 iK1053 键盘保护套【iK1052升级版，不含笔】"
                }
            ]
            this.init();
            this.render();
            this.bindevent()
            
        }
        bindevent(){
            
        }
        init(){

        }
        render(){
            // this.id=localStorage.getItem("1")
            // console.log(this.id);
            var str="";
            for(var i=0;i<this.data.length;i++){
                this.num=localStorage.getItem(i)
                if(this.num!=null){
                    //console.log(this.data[i-1]);
                    var sum=this.data[i-1].price*this.num;
                    $(".order_content").html(
                   str+=`<ul class="order_lists" id="${this.data[i-1].id}">
                        <li class="list_chk">
                            <input type="checkbox" id="checkbox_2" class="son_check">
                            <label for="checkbox_2" class=""></label>
                        </li>
                        <li class="list_con">
                            <div class="list_img"><a href="javascript:;">
                                <img src="${this.data[i-1].src}" alt=""></a></div>
                            <div class="list_text"><a href="javascript:;">${this.data[i-1].title}</a></div>
                        </li>
                        
                        <li class="list_price">
                            <p class="price">￥${this.data[i-1].price}</p>
                        </li>
                        <li class="list_amount">
                            <div class="amount_box">
                                <a href="javascript:;" class="reduce reSty">-</a>
                                <input type="text" value=${this.num} class="sum">
                                <a href="javascript:;" class="plus">+</a>
                            </div>
                        </li>
                        <li class="list_sum">
                            <p class="sum_price">￥${this.data[i-1].price*this.num}</p>
                        </li>
                        <li class="list_op">
                            <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                        </li>
                    </ul>`

                    )
                }
            }
        }


    }
    $(function () {
 
        
        var $allCheckbox = $('input[type="checkbox"]'), 
            $wholeChexbox = $('.whole_check'),
            $cartBox = $('.cartBox'), 
            $shopCheckbox = $('.shopChoice'),
            $sonCheckBox = $('.son_check');
        $allCheckbox.click(function () {
            if ($(this).is(':checked')) {
                $(this).next('label').addClass('mark');
            } else {
                $(this).next('label').removeClass('mark')
            }
        });  
        $wholeChexbox.click(function () {
            var $checkboxs = $cartBox.find('input[type="checkbox"]');
            if ($(this).is(':checked')) {
                $checkboxs.prop("checked", true);
                $checkboxs.next('label').addClass('mark');
            } else {
                $checkboxs.prop("checked", false);
                $checkboxs.next('label').removeClass('mark');
            }
            totalMoney();
        });
     
     
        // $sonCheckBox.each(function () {
        //     $(this).click(function () {
        //         if ($(this).is(':checked')) {
        //             var len = $sonCheckBox.length;
        //             var num = 0;
        //             $sonCheckBox.each(function () {
        //                 if ($(this).is(':checked')) {
        //                     num++;
        //                 }
        //             });
        //             if (num == len) {
                        
        //                 $wholeChexbox.prop("checked", true);
        //                 $wholeChexbox.next('label').addClass('mark');
        //             }
        //         } else {
                    
        //             $wholeChexbox.prop("checked", false);
        //             $wholeChexbox.next('label').removeClass('mark');
        //         }
        //     })
        // })
        $('.son_check').on("click",()=>{
            console.log(1);
        })
     
    
        $shopCheckbox.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    
                    var len = $shopCheckbox.length;
                    var num = 0;
                    $shopCheckbox.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $wholeChexbox.prop("checked", true);
                        $wholeChexbox.next('label').addClass('mark');
                    }
     
                    
                    $(this).parents('.cartBox').find('.son_check').prop("checked", true);
                    $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
                } else {
                    
                    $wholeChexbox.prop("checked", false);
                    $wholeChexbox.next('label').removeClass('mark');
     
                    
                    $(this).parents('.cartBox').find('.son_check').prop("checked", false);
                    $(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark');
                }
                totalMoney();
            });
        });
     
     
        $cartBox.each(function () {
            var $this = $(this);
            var $sonChecks = $this.find('.son_check');
            $sonChecks.each(function () {
                $(this).click(function () {
                    if ($(this).is(':checked')) {
                       
                        var len = $sonChecks.length;
                        var num = 0;
                        $sonChecks.each(function () {
                            if ($(this).is(':checked')) {
                                num++;
                            }
                        });
                        if (num == len) {
                            $(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
                            $(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark');
                        }
     
                    } else {
                       
                        $(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
                        $(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark');
                    }
                    totalMoney();
                });
            });
        });
     
     
       
        var $plus = $('.plus'),
            $reduce = $('.reduce'),
            $all_sum = $('.sum');
        $plus.click(function () {
            var $inputVal = $(this).prev('input'),
                $count = parseInt($inputVal.val()) + 1,
                $obj = $(this).parents('.amount_box').find('.reduce'),
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(), //鍗曚环
                $priceTotal = $count * parseInt($price.substring(1));
            $inputVal.val($count);
            $priceTotalObj.html('￥' + $priceTotal);
            if ($inputVal.val() > 1 && $obj.hasClass('reSty')) {
                $obj.removeClass('reSty');
            }
            totalMoney();
        });
     
        $reduce.click(function () {
            var $inputVal = $(this).next('input'),
                $count = parseInt($inputVal.val()) - 1,
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(), //鍗曚环
                $priceTotal = $count * parseInt($price.substring(1));
            if ($inputVal.val() > 1) {
                $inputVal.val($count);
                $priceTotalObj.html('￥' + $priceTotal);
            }
            if ($inputVal.val() == 1 && !$(this).hasClass('reSty')) {
                $(this).addClass('reSty');
            }
            totalMoney();
        });
     
        $all_sum.keyup(function () {
            var $count = 0,
                $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
                $price = $(this).parents('.order_lists').find('.price').html(), //鍗曚环
                $priceTotal = 0;
            if ($(this).val() == '') {
                $(this).val('1');
            }
            $(this).val($(this).val().replace(/\D|^0/g, ''));
            $count = $(this).val();
            $priceTotal = $count * parseInt($price.substring(1));
            $(this).attr('value', $count);
            $priceTotalObj.html('￥' + $priceTotal);
            totalMoney();
        })
     
        $('.delBtn').click(function (e) {
            var order_lists = e.target.parentNode.parentNode.parentNode
            var id=order_lists.getAttribute("id")
            window.localStorage.removeItem(id)
            
        });
    
        function totalMoney() {
            
            var total_money = 0;
            var total_count = 0;
            var calBtn = $('.calBtn a');
            $sonCheckBox.each(function (e) {
                
                if ($(this).is(':checked')) {
                    var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1));
                    var num = parseInt($(this).parents('.order_lists').find('.sum').val());
                    total_money += goods;
                    total_count += num;
                }
            });
            $('.total_text').html('￥' + total_money);
            $('.piece_num').html(total_count);
     
            // console.log(total_money,total_count);
     
            if (total_money != 0 && total_count != 0) {
                if (!calBtn.hasClass('btn_sty')) {
                    calBtn.addClass('btn_sty');
                }
            } else {
                if (calBtn.hasClass('btn_sty')) {
                    calBtn.removeClass('btn_sty');
                }
            }
        }
     
     
    });
    new Cart

})